<template>
  <div>
    <!-- <ChildThree colorVal="red"></ChildThree>
    <ChildThree color-val="green"></ChildThree> -->
    <!-- <ChildThree @changeColor="changeColorVal" :colorVal="colorV">
      sdlkslkdjkj
    </ChildThree> -->
    <!-- <ChildThree></ChildThree> -->
    <!-- <h1 title="标题"></h1> -->
  </div>
  <button v-for="item in buttons" :key="item.text" @click="changeTab(item.com)">{{ item.text }}</button>
  <KeepAlive>
    <component :is="currentTab"></component>
  </KeepAlive>

  
</template>
<script setup>
import {ref,shallowRef} from 'vue'
import ChildThree from './components/ChildThree.vue';
import TabOne from './components/TabOne.vue'
import TabTwo from './components/TabTwo.vue'
import TabThree from './components/TabThree.vue'
const colorV = ref('red')
const colorList = ['red','green','blue','pink','skyblue']
const changeColorVal = ()=>{
  colorV.value = colorList[Math.floor(Math.random() * 5)]
}

const buttons = shallowRef([{
  text:'TabOne',
  com:TabOne
},{
  text:'TabTwo',
  com:TabTwo
},{
  text:'TabThree',
  com:TabThree
}
])
const currentTab = shallowRef(TabOne)
const changeTab = (tab)=>{
  console.log(typeof tab);
  currentTab.value = tab
}
</script>